<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-1.8.0.js" type="text/javascript"></script>

    <script src="../js/echarts.min.js"></script>

</head>
<body>
<div id="main" style="width: 100%; height: 200px;"></div>
<div id="main1" style="width: 100%; height: 200px;"></div>
<div id="main2" style="width: 100%; height: 200px;"></div>

<script type="text/javascript">
    //条形图
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['张三','李四'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '听课数量',
                type: 'bar',
                barWidth: '60%',
                data: [80,100]
            }
        ]
    };
    myChart.setOption(option);


    //饼状图

    var myChart1 = echarts.init(document.getElementById('main1'));

    var option1 = {
        title: {
            text: '听课情况统计',
            subtext: '',
            x: 'center',
            top: 10,
            textStyle: {
                fontSize: 20
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            top: '5%',
            itemWidth: 40,
            itemHeight: 25,
            textStyle: {
                fontSize: 20
            },
            data: ['优', '良', '一般','差']
        },
        series: [
            {
                name: '微信状态',
                type: 'pie',
                radius: '50%',
                center: ['45%', '60%'],
                data: [
                        { value: 100, name: '优', label: { normal: { show: true, formatter: '{d}%', textStyle: { fontSize: 14 } } } },
                    { value: 50, name: '良', label: { normal: { show: true, formatter: '{d}%', textStyle: { fontSize: 14 } } } },
                    { value: 25, name: '一般', label: { normal: { show: true, formatter: '{d}%', textStyle: { fontSize:14 } } } },
                    { value: 25, name: '差', label: { normal: { show: true, formatter: '{d}%', textStyle: { fontSize: 14 } } } }
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    myChart1.setOption(option1);

    //饼状图

    var myChart2 = echarts.init(document.getElementById('main2'));

    var option2 = {
        title : {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    myChart2.setOption(option2);

</script>
</body>
</html>